<template>
  <div>
    <div class="topSearch" style="margin-bottom: 10px;display: flex;justify-content: space-between">
      <div>
         <!-- <span>仓库： <el-select size="small"
                              style="width: 250px" v-model="params.areaId" clearable>
                <el-option v-for="item in warehouseList" :label="item.areaName" :value="item.area"
                           :key="item.area"></el-option>
              </el-select></span> -->
        <span style="margin-left: 15px">门店名称：<el-input size="small" style="width: 250px"
                                                       v-model="params.storeName" clearable></el-input></span>
        <span style="margin-left: 15px">
            <el-button size="small" type="primary" @click="_search">搜 索</el-button>
            <el-button size="small" type="info" @click="_reset">重 置</el-button>
        </span>
      </div>
      <el-button size="small" type="primary" @click="_add">新增赵一鸣增加单</el-button>
    </div>
    <div class="centerTable">
      <el-table :data="multipleData" height="calc(100vh - 350px)"
                :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="storeName" label="店铺"></el-table-column>
        <el-table-column
            v-for="col in editableColumns"
            :key="col.prop"
            :prop="col.prop"
            :label="col.label"
        >
          <template v-slot:default="scope">
            <el-input
                v-if="scope.row.isEditing[col.prop]"
                v-model="scope.row[col.prop]"
                @blur="blurEvent(scope.row, scope.$index, col.prop)"
                v-focus
            ></el-input>
            <p v-else @click="cellClick(scope.row, col.prop)">
              {{ scope.row[col.prop] }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="payTime" label="付款时间"></el-table-column>
        <el-table-column label="付款截图">
          <template v-slot:default="scope">
            <div style="display: flex"><el-image
                v-for="(item, index) in scope.row.payProofList"
                :key="index"
                :src="host+item"
                :preview-src-list="scope.row.payProofList.map(img => host + img)"
                class="img-item"
                fit="cover"
            >
            </el-image></div>
          </template>
        </el-table-column>
        <el-table-column prop="payCard" label="付款账号"></el-table-column>
        <el-table-column label="操作">
          <template v-slot:default="scope">
            <el-link style="color: #66b1ff;text-decoration: underline;margin-right: 10px" @click="_edit(scope.row)">编
              辑
            </el-link>
            <el-link style="color: #ce0e0f;text-decoration: underline;margin-right: 10px" @click="_delete(scope.row)">删
              除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="padding: 20px 0;" align="right" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-sizes="[20, 30, 40, 50]"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <div>
      <el-dialog :visible.sync="dialogAdd" :title="title" top="10px" height="calc(100vh - 350px)"
                 style="overflow-y: auto" width="40%">
        <div>
          <el-row>
            <el-col :span="24">
              <span style="width: 50px">店名：</span>
              <el-input size="small" style="width: 280px" v-model="data.storeName"></el-input>
            </el-col>
            
          </el-row>
          <!--        -->
          <el-row>
             <el-col :span="12">
              <span>金额：</span>
              <el-input-number v-model="data.money" :min="0" size="small"
                               style="width: 200px" @change="changeNum('bjdFee', $event)"></el-input-number>
            </el-col>
            <el-col :span="12">
              <span>报价单：</span>
              <el-input-number v-model="data.bjdMoney" :min="0" size="small"
                               style="width: 200px" @change="changeNum('bjdFee', $event)"></el-input-number>
            </el-col>
          </el-row>
          <!--        -->
          
          <!--        -->
          <el-row>
            <el-col :span="12">
              <span style="width: 70px">付款账号：</span>
              <el-input style="width: 280px" size="small" v-model="data.payCard"></el-input>
            </el-col>
            <el-col :span="12">
              <span style="width: 70px">付款日期：</span>
              <el-date-picker
                  v-model="data.payTime"
                  type="date"
                  size="small"
                  style="width: 280px"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
              </el-date-picker>
            </el-col>
          </el-row>
        </div>
        <div style="margin-top: 15px">
          <el-row>
            <el-col style="display: flex;align-items: center">
              <span>付款图：</span>
              <el-upload
                  multiple
                  class="uploader-wrap"
                  :headers="headers"
                  :action="`${$apiHost}/common/fileImgUrl`"
                  :on-success="paySuc"
                  :show-file-list="false"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                <template #tip>
                  <div class="img-wrap" style="display: flex">
                    <div v-for="(item, index) in payProofList">
                      <el-image
                          :key="index"
                          :src="host+item"
                          :preview-src-list="payProofList.map(img => host + img)"
                          class="img-item"
                          fit="cover"
                      >
                      </el-image>
                      <div @click="deletePic(index)">
                        <el-icon name="delete"></el-icon>
                      </div>
                    </div>
                  </div>
                </template>
              </el-upload>
            </el-col>
          </el-row>
        </div>
        <span slot="footer">
        <el-button @click="dialogAdd = false">取 消</el-button>
        <el-button type="primary" @click="_submit">确 定</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "yimingMultipleOrder",
  data() {
    return {
      dialogAdd: false,
      title: "",
      date: "",
      areaId: "",
      num: 0,
      currentPage: 1,
      total: 0,
      host: this.$imgHost,
      warehouseList: [],
      editableColumns: [
        {prop: 'money', label: '金额'},
        {prop: 'bjdMoney', label: '报价单'},
      ],
      data: {
      },
      editId: "",
      params: {
        storeName: "",
        areaId: '',
        pageNumber: 1,
        pageSize: 20,
      },
      orderImg: [],
      orderProofList: [],
      productData: [],
      payProofList: [],
      multipleData: []
    }
  },
  computed: {
    headers() {
      const token = this.$quinn.getStorage("token");
      return {
        token,
      };
    },
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector('input').focus()
      }
    }
  },
  created() {
    this.areaList()
    this.getData()
  },
  methods: {
    async _submit() {
      try {
        const apiMap = {
          '新增': this.$api.financeAddZymAddOrder,
          '编辑': this.$api.financeUpdateZymAddOrder
        };

        const apiFunc = apiMap[this.title];
        if (!apiFunc) return;
        const subData = {
          ...this.data,
          payProofList: this.payProofList,
        }
        if (this.title == '编辑') subData.id = this.editId
        const resDate = await apiFunc(subData);
        if (resDate == 1) {
          this.$message.success(`${this.title}成功！`);
          this.dialogAdd = false;
          this.getData()
        }
      } catch (err) {
        console.error('接口请求出错：', err);
        this.$message.error('操作失败，请稍后重试');
      }
    },
    blurEvent(row, index, column) {
      row.isEditing[column] = false;
      const payload = {
        id: row.id,
        [column]: row[column]
      };
      this.$api.financeUpdateZymAddOrder(payload).then(res => {
        if (res == 1) {
          this.$message.success('修改成功！')
          this.getData()
        }
      })
    },
    cellClick(row, column) {
      //input编辑
      Object.keys(row.isEditing).forEach(key => {
        row.isEditing[key] = false;
      });
      // 取消
      row.isEditing[column] = true;
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getData()
    },
    _search() {
      this.params.pageNumber = 1
      this.getData()
    },
    _reset() {
      this.params = this.$options.data().params
      this.getData()
    },
    getData() {
      const params = this.params
      this.$api.financeGetZymAddOrderList(params).then(res => {
        res.data.map(el => {
          el.isEditing = {};
          this.editableColumns.forEach(col => {
            el.isEditing[col.prop] = false;
          });
        })
        this.multipleData = res.data
        this.total = res.total
      })
    },
    _add() {
      this.dialogAdd = true
      this.title = '新增'
      this.data = []
      this.payProofList = []
      this.orderProofList = []
    },
    areaList() {
      this.$api.areaLedgerAreaList().then(res => {
        this.warehouseList = res
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    paySuc(res) {
      if (res.code == 200 && res.result) {
        if(this.payProofList){
            this.payProofList.push(res.result[0]);
        }else{
            this.payProofList=[res.result[0]]
        }
      }
    },
    deletePic(i) {
      this.payProofList.splice(i, 1)
    },
    changeNum(field, val) {
      if (!val) {
        this.$set(this.data, field, 0);
      }
    },
    _delete(e) {
      const data = {
        id: e.id
      }
      this.$confirm('确认删除？')
          .then(_ => {
            this.$api.financeDeleteZymAddOrder(data).then(res => {
              if (res == 1) {
                this.$message.success('删除成功！')
                this.getData()
              }
            })
          })
          .catch(_ => {
            return
          });
    },
    _edit(a) {
      const data=JSON.parse(JSON.stringify(a))
      this.dialogAdd = true
      this.editId = data.id
      this.title = '编辑'
      this.data=data
      this.payProofList = data.payProofList
    }
  }
}
</script>

<style scoped lang="less">
.el-row {
  margin-bottom: 20px;

  span {
    display: inline-block;
    width: 90px;
  }
}
</style>